<template>
  <div style="display: flex">
    <dv-active-ring-chart :config="config" style="width: 250px; height: 250px;" />
      <div style="font-size: 14px; margin-top: 80px; line-height: 10px; margin-left: -20px">
        <div style=" color: #23cdd8;margin-bottom: 20px;">
          在线数量：
          <span style="color: #fff;font-size: 16px;">{{ this.config.data[0].value }}</span>
          <dv-decoration-3 style="width: 200px; height: 20px; margin-top: 5px" />
        </div>
     
        <div style=" color: #23cdd8;margin-bottom: 20px;" >
          离线数量：
          <span style="color: #fff;font-size: 16px;">{{ this.config.data[1].value }}</span>
          <dv-decoration-3 style="width: 200px; height: 20px; margin-top: 5px" />
        </div>
      </div>
    
  </div>
</template>

<script>
import {
  onlineOrOffline
} from "@/api/iot/device";

export default {
  data() {
    return {
      // emqx统计信息
      static: {},
      config: {
        data: [],
            color: ['#ffdb5c', '#67e0e3'],
      },
      timer: null,
    };
  },
  created() {
    this.onlineOrOffline();
  },
  computed: {},
  beforeDestroy() {
    this.clearData();
  },
  
  methods: {
    onlineOrOffline(){
      onlineOrOffline().then(response => {
                if (response.code == 200) {
                    this.config.data = response.data;
                    // 轮询
                    this.switper();
                }
            });
    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.onlineOrOffline();
      };
      this.timer = setInterval(looper, 6000);
    },
  },
};
</script>
